<template>
	<view>
		<view class="text-padding">
			<view class="flex">
				<view
					aria-role="menuitem"
					:class="serviceType == 'news' ? 'border-t' : ''"
					class="flex-sub card-menu bg-white padding radius"
					style="border-radius: 16rpx; margin-right: 12rpx;"
					@click="note"
				>
					<view class="title margin-top-xs"><view class="text-cut text-wight">服务通知</view></view>
					<view aria-hidden="true" class="text-gray text-sm flex"><view class="text-cut">你有未读通知</view></view>
					<image aria-hidden="true" class="image-st margin-right-st" :src="img_src + 'xxfw.png'" />
				</view>
				<view
					aria-role="menuitem"
					:class="serviceType == 'all' ? 'border-t' : ''"
					class="flex-sub card-menu bg-white padding radius"
					style="border-radius: 16rpx;margin-left: 12rpx;"
					@click="alls"
				>
					<view class="title margin-top-xs"><view class="text-cut text-wight">所有服务</view></view>
					<view aria-hidden="true" class="text-gray text-sm flex"><view class="text-cut">发现更多服务</view></view>
					<image aria-hidden="true" class="image-st margin-right-st" :src="img_src + 'syfw.png'" />
				</view>
			</view>
		</view>
		<!-- 服务通知 naviageToLinkTest(item.muri)-->
		<!-- 触发滑动删除 ：@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" -->
		<view v-if="serviceType === 'news'" class="cu-list menu-avatar" style="margin-top: 24rpx;">
			<view aria-role="tab" v-if="notifyInfoList == ''" class="text-center text-gray">
				<text class="iconfont icon-zanwushuju" style="font-size: 200rpx;margin-top: 200rpx;"></text>
				<br />
				服务通知暂无数据
			</view>
			<view
				class="cu-item not_list margin-lr margin-bottom-sm"
				@click="getNews(item)"
				:class="modalName == 'move-box-' + index ? 'move-cur' : ''"
				v-for="(item, index) in notifyInfoList"
				:key="index"
				:data-target="'move-box-' + index"
			>
				<view
					aria-role="button"
					:aria-label="item.name"
					class="cu-avatar lg radius"
					:style="{ background: item.icolor }"
					style="border-radius: 99px;"
				>
					<view class="cu-item text-center" style="display: inherit;" :style="{ color: item.icolor }">
						<text v-if="item.ptype=='ICO'" class="iconfont text-white" style="font-size: 64rpx;" :class="item.props" :style="item.pscss"></text>
						<image v-if="item.ptype=='IMG'" :src="item.props" mode="" style="width: 64rpx;height: 64rpx;"></image>
					</view>
					<view class="cu-tag badge" :style="{ visibility: parseInt(item.badge, 10) < 1 ? 'hidden' : 'visible' }">
						{{ parseInt(item.badge, 10) > 99 ? '...' : item.badge }}
					</view>
				</view>
				<view aria-hidden="true" class="content">
					<view>{{ item.name || '未知' }}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="text-gray margin-right-xs" :style="{ visibility: !item.title ? 'hidden' : 'visible' }">{{ item.title }}</text>
						</view>
					</view>
				</view>
				<view aria-hidden="true" class="action">
					<!-- resolvingDate(item.ptime) -->
					<view class="text-grey text-xs">{{$utils.dateDiff2(item.ptime)}}</view>
				</view>
				<!-- 				<view aria-role="button" class="move">
					<view class="bg-red">删除</view>
				</view> -->
			</view>
		</view>
		<!-- 所有服务 naviageToLinkPage(childiItem.muri)-->
		<view v-if="serviceType === 'all'">
			<view v-for="(item, index) in allApplicationList" :key="index">
				<view aria-role="tab" class="text-action text-wight">
					<text class="cuIcon-titles" style="color: #E64C14;"></text>
					{{ item.grp }}
				</view>
				<view class="list padding-lr bg-white">
					<view
						aria-role="button"
						v-for="(childiItem, chaildIndex) in item.data"
						:key="chaildIndex"
						class="list_box padding-top-xs"
						@click="naviageToLinkPage(childiItem.muri)"
					>
						<view
							class="img"
							:aria-label="childiItem.name"
						>
							<view v-if="childiItem.ptype == 'ICO'" class="cu-item">
								<text :style="childiItem.pscss" style="font-size:75rpx" :class="childiItem.props"></text>
							</view>
							<image v-else aria-hidden="true" class="cu-avatar round lg" :src="childiItem.props"></image>
						</view>

						<view aria-hidden="true" class="box_text">
							<text class="text-wight">{{ childiItem.name }}</text>
							<view class="text-gray text-sm flex">
								<view class="text-cut ellipsis">{{ childiItem.note }}</view>
							</view>
						</view>
						<view class="box_icon">
							<text class="iconfont icon-jiantouarrow487 icon_size"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			serviceType: 'news',
			notifyInfoList: [],
			allApplicationList: [],
			applicationShow: 'none',
			modalName: null,
			img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
			sys_src: this.$utils.SYS_URL,
			user: {}
		};
	},
	onShow() {
		//页面每次显示的时候加载
		this.getServType();
		this.user = uni.getStorageSync('users');
	},
	onLoad() {
		//页面第一次加载时执行
		this.getServData();
	},
	methods: {
		//消息跳转
		getNews(item) {
			let icolor = item.icolor;
			let icons = item.icons;
			let aid = item.aid;
			uni.navigateTo({ url: `/pages_mine/msgs/mlist?aid=${aid}&icons=${icons}&icolor=${icolor}` });
		},
		getServType() {
			let type = uni.getStorageSync('serviceType') || '';
			if (type != '') {
				this.serviceType = type;
			}
			uni.removeStorageSync('serviceType');
		},
		getServData() {
			// 获取页面数据 对于全部应用通过类型做分割与重组
			this.notifyInfoList = [];
			const that = this;
			uni.showLoading({ title: '加载中' });
			this.$request.getForm('/view/vmui/serv').then(res => {
				this.notifyInfoList = res.data.msgs;
				let arr = res.data.apps;
				//应用自动分组
				var map = {},app = [];
				for(var i = 0; i < arr.length; i++){
				    var ai = arr[i];
				    if(!map[ai.grp]){
				        app.push({
				            grp: ai.grp,
				            data: [ai]
				        });
				        map[ai.grp] = ai;
				    }else{
				        for(var j = 0; j < app.length; j++){
				            var dj = app[j];
				            if(dj.grp == ai.grp){
				                dj.data.push(ai);
				                break;
				            }
				        }
				    }
				}
				this.allApplicationList=app
				uni.hideLoading();
			});
		},
		note() {
			this.serviceType = 'news';
		},
		alls() {
			this.serviceType = 'all';
		},

		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
		},
		
		resolvingDate(date) {
			let times = this.$utils.resolvingDate(date);
			return times;
		},

		naviageToLinkPage(url) {
			if(this.user.stateId != '1'){
				uni.showModal({
					title: '提示',
					content: '本次操作需要您进行实名登录验证',
					showCancel: true,
					confirmText: '确定',
					success: (e) => {
						if (e.confirm) {
							// #ifdef MP-WEIXIN
							uni.navigateTo({url: '/pages_mine/users/askme'});
							// #endif
							// #ifdef H5
							uni.navigateTo({url: '/pages/admin/login'});
							// #endif
						}
					}
				})
			} else {
				if (url.indexOf('https') != -1) {
					const newUrl = encodeURIComponent(this.$utils.setLinkUrl(url));
					uni.navigateTo({ url: '/pages_serv/apps/wview?url=' + newUrl });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	},
	onPullDownRefresh() {
		this.getServData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 200);
	}
};
</script>

<style lang="scss">
//所有服务开始
.list{
	
}
.list_box{
	height: 130rpx;
	position: relative;
	border-bottom: 1px #f3f3f3 solid;
}
.box_text{
	position: absolute;
	left: 108rpx;
	top: 26rpx;
	font-size: 32rpx;
}
.box_icon{
	float: right;
	margin-top: 24rpx;
}
.box_icon>.icon_size{
	font-size: 30rpx;
	color: #DDDDDD;
}
.list_box .img{
	margin-top: 8rpx;
}
.ellipsis{
	width: 420rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
//所有服务结束
.text-padding {
	padding: 24rpx 24rpx 0 24rpx;
}

.text-wight {
	font-size: 15px;
	font-weight: 600;
}

.action {
	margin-bottom: 13px;
}

.image-st {
	width: 100upx;
	height: 90upx;
}

.cu-image {
	margin: 18upx;
	padding: 6upx;
	width: 90upx;
	height: 90upx;
}

.text-action {
	margin: 24rpx 0;
}
.margin-right-st {
	float: right;
	margin-top: -80upx;
	margin-right: -14upx;
}
.cu-list > .cu-item {
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

.border-t {
	background: #fff9f7;
	border: rgba(230, 76, 20, 0.4) solid 1rpx;
	box-shadow: 0 2px 8px 0 rgba(230, 76, 20, 0.06);
}
.not_list{
	border-radius: 16rpx;
}
</style>
